<template>
  <!-- //数据库设置 -->
  <div v-show="$route.name=='detail'" class="database-setting-container">
    <!-- 设置 -->
    <el-dropdown
      ref="messageDropdown"
      class="right-setting hover-effect"
      trigger="click"
      @command="selectDropDown"
    >
      <div class="avatar-wrapper">
        <span style="width"> <svg-icon
          icon-class="set"
          style="margin-right:5px;"
        /></span>
        <span>设置</span>
      </div>
      <el-dropdown-menu slot="dropdown" ref="dropdown_menu">
        <el-tooltip
          content="暂无变量管理权限"
          placement="left"
          effect="light"
          :disabled="getAuth('13')"
        >
          <div>
            <el-dropdown-item
              command="变量管理"
              :disabled="!getAuth('13')"
            >               <svg-icon
              icon-class="variable"
              style=" margin-right: 10px;"
            />变量管理</el-dropdown-item>
          </div>
        </el-tooltip>
        <el-tooltip
          content="暂无成员管理权限"
          placement="left"
          effect="light"
          :disabled="getAuth('8')"
        >
          <div>
            <el-dropdown-item
              command="成员管理"
              :disabled="!getAuth('8')"
            >  <svg-icon
              icon-class="member"
              style=" margin-right: 10px;"
            />成员管理</el-dropdown-item>
          </div>
        </el-tooltip>
        <!-- <svg-icon
              icon-class="follow-up"
              style=" margin-right: 10px;"
            /> -->
        <el-tooltip
          content="暂无删除数据库权限"
          placement="left"
          effect="light"
          :disabled="getAuth('11')"
        >
          <div>
            <el-dropdown-item
              command="删除数据库"
              :disabled="!getAuth('11')"
            >
              <i class="el-icon-delete" /> 删除数据库</el-dropdown-item>
          </div>
        </el-tooltip>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 成员管理 -->
    <el-dialog
      :append-to-body="true"
      style="z-index: 2020"
      :visible.sync="isOpenUser"
      title="成员与权限"
      center
      width="50%"
    >
      <SettingUser />

    </el-dialog>
  </div>
</template>

<script>
import SettingUser from './components/SettingUser.vue'
// 导入api接口
import { deleteDatabase } from '@/api/table'
export default {
  name: 'Databasesetting',
  components: {
    SettingUser
  },
  data() {
    return {
      isOpenUser: false
    }
  },
  computed: {
    // 判断用户是否有权限
    getAuth(index) {
      return index => {
        const auth = this.$store.state.database.information.auths.auth
        const res = auth.indexOf(index)
        if (res === -1) {
          return false
        } else {
          return true
        }
      }
    }
  },
  watch: {
    $route() {
      this.isOpenUser = false
    }
  },
  methods: {
    // 点击触发下拉选项
    async  selectDropDown(e) {
      console.log('eeeeee', e)
      // 这里需要判断用户点击的那一个
      if (e === '变量管理') {
        // 这里就是变量管理
        // 进来之后跳转到变量管理页
        // 跳转前需要清理变量管理的数据
        await this.$store.dispatch('management/removemanagement')
        //
        await this.$store.dispatch('management/setSetmodified', false)
        await this.$router.push({ name: 'DatabaseVariable' })
      } else if (e === '成员管理') {
        // 这里就是成员管理
        this.isOpenUser = true
      } else {
        // 删除数据库
        this.$confirm('此操作将永久删除该数据库, 是否继续?', '提示', {
          confirmButtonClass: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const database_id = this.$store.state.database.database_id
          // console.log(this.$store.state.user.getSelect)
          const res = await deleteDatabase({ database_id: database_id })
          console.log(res)
          if (res.data.code === 1) {
            this.$message({ type: 'success', message: '删除成功' })
            // 删除成功需要清空数据
            // window.localStorage.removeItem('getSelect')
            const getSelect = this.$store.state.user.getSelect
            getSelect.id = 0
            // 需要清空databaseid 需要清空模板id
            this.$store.dispatch('management/setSetmodified', false)
            this.$store.dispatch('database/setDatabaseId', '')
            this.$store.dispatch('database/setTemplate_id', '')
            this.$store.dispatch('database/setIsItOperable', 0)

            console.log(getSelect)
            this.$store.dispatch('user/newsetSelect', getSelect)
            this.$router.push({ name: 'Dashboard' })
          } else {
            this.$message({ type: 'warning', message: '删除失败' })
          }
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.database-setting-container {
  .right-setting {
    position: fixed;
    top: 0;
    right: 20px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }
}
</style>
